<template>
  <div id="app">
    <input class="ipt" v-model="message" />
    <p>{{ message }}</p>
    <button class="btn" @click="resule">添加</button>
    <p v-for="(item, index) in List" :key="index">
      <span class="item">{{ item }}</span>
      <button class="item" @click="handleRemove(index)">移除</button>
    </p>
    <span class="item" v-if="flag">总数:{{ List.length }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "",
      flag: false,
      List: [],
    };
  },
  methods: {
    resule: function () {
      if (this.message) {
        this.List.push(this.message);
        if (this.List.length > 0) {
          this.flag = true;
        }
      }
    },
    handleRemove: function (index) {
      this.List.splice(index, 1);
    },
  },
};
</script>
<style scoped>
.ipt {
  height: 40px;
  outline: none;
}

.btn {
  height: 40px;
  background: #40b883;
  color: white;
  margin-bottom: 20px;
}

.item {
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #40b883;
  color: white;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
}
</style>